<template>
  <div class="update-note">
    <div>
      <h2>更新说明</h2>
      <el-button type="primary" @click="dialogVisible = true">修改</el-button>
    </div>
    <div v-html="content"></div>
    <el-dialog fullscreen :visible.sync="dialogVisible">
      <tinymce-editor @submit="submit" @cancel="dialogVisible = false" :contentProps="content"></tinymce-editor>
    </el-dialog>
  </div>
</template>
<script>
import TinymceEditor from './components/TinymceEditor.vue'
export default {
  name: 'updateNote',
  components: {
    TinymceEditor
  },
  data() {
    return {
      id: null,
      content: '',
      dialogVisible: false,
    }
  },
  created() {
    this.getData();
  },
  methods: {
    async getData(id = null) {
      const { data: res } = await this.$http({
        url: this.$http.adornUrl2('/appinfo/findContent'),
        method: 'get',
        params: this.$http.adornParams(id ? { id } : {})
      });
      const { data } = res;
      if (data !== null) {
        this.content = data.content;
        this.id = data.id;
      }
    },
    async update(content, id) {
      return await this.$http({
        url: this.$http.adornUrl2('/appinfo/content'),
        method: 'post',
        params: this.$http.adornParams(id ? { content, id } : { content })
      })
    },
    async submit(content) {
      const { data } = await this.update(content, this.id);
      this.dialogVisible = false;
      this.getData(this.id);
    }
  }
}
</script>
<style lang="scss">
.update-note {
  padding-left: 20px;
  > div {
    h2 {
      margin-right: 20px;
      .el-button {
        flex-grow: 0;
      }
    }
  }
}
</style>
